<template>
  <div class="login-container">
    <div class="login-left">
      <div class="login-content">
        <div class="title-container">
          <h1 class="title">万象云管MSP管理系统</h1>
          <p class="subtitle">一站式云服务应用托管平台 安全 省心 合规</p>
        </div>
      </div>
    </div>

    <div class="login-right">
      <div class="login-box">
        <el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form">
          <div class="title-container">
            <img src="@/assets/images/LOGO.png" class="logo" alt="logo">

          </div>

          <el-form-item prop="username">
            <el-input
              v-model="loginForm.username"
              placeholder="请输入账号"
              type="text"
              prefix-icon="el-icon-user"
            />
          </el-form-item>

          <el-form-item prop="password">
            <el-input
              v-model="loginForm.password"
              placeholder="请输入密码"
              :type="passwordVisible ? 'text' : 'password'"
              prefix-icon="el-icon-lock"
            >
              <i
                slot="suffix"
                :class="['el-input__icon', passwordVisible ? 'el-icon-view' : 'el-icon-hide']"
                @click="passwordVisible = !passwordVisible"
              />
            </el-input>
          </el-form-item>
          <el-form-item prop="code" v-if="captchaEnabled">
            <el-input
              v-model="loginForm.code"
              class="is-validate-code"
              auto-complete="off"
              placeholder="验证码"
              @keyup.enter.native="handleLogin"
              prefix-icon="el-icon-unlock"
            >
            </el-input>
            <div class="login-code">
              <img
                :src="codeUrl"
                @click="getCode"
                class="login-code-img"
                alt="验证码"
              />
            </div>
          </el-form-item>

<!--          <el-form-item>-->
<!--            <el-radio-group v-model="loginForm.userType" class="account-type">-->
<!--              <el-radio label="07">个人账户</el-radio>-->
<!--              <el-radio label="06">经销商账户</el-radio>-->
<!--            </el-radio-group>-->
<!--          </el-form-item>-->

          <el-form-item>
            <el-button
              :loading="loading"
              type="primary"
              class="login-button"
              @click.native.prevent="handleLogin"
            >
              登录
            </el-button>
          </el-form-item>

          <div class="login-options">
            <el-checkbox v-model="loginForm.rememberMe">同意并接受</el-checkbox>
            <span class="agreement-links">
              《用户协议条款》
              《隐私权协议条款》
            </span>
          </div>

        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
import { getCodeImg } from "@/api/login";
import Cookies from "js-cookie";
import { encrypt, decrypt } from '@/utils/jsencrypt'

export default {
  name: "Login",
  data() {
    return {
      codeUrl: "",
      loginForm: {
        username: null,
        password: null,
        rememberMe: false,
        code: "",
        uuid: "",
        type: "2", // 默认运维平台
        userType: "07" // 默认选中个人账户06    经销商账户07
      },
      loginRules: {
        username: [
          { required: true, trigger: "blur", message: "请输入您的账号" }
        ],
        password: [
          { required: true, trigger: "blur", message: "请输入您的密码" },{ min: 6, max: 12, message: '密码长度应大于等于6个字符小于12个字符!', trigger: "blur" },
          {
            trigger: 'blur',
            validator: (rule, value, callback) => {
              var passwordreg = /(?![A-Z]*$)(?![a-z]*$)(?![0-9]*$)(?![^a-zA-Z0-9]*$)/
              console.log(passwordreg.test(value))
              if (!passwordreg.test(value)) {
                callback(new Error('密码过于简单，请联系管理员修改!'))
              }
              else{
                callback()
              }
            } },

        ],
        code: [{ required: true, trigger: "change", message: "请输入验证码" }]
      },
      loading: false,
      captchaEnabled: true,
      register: false,
      redirect: undefined,
      passwordVisible: false
    };
  },
  watch: {
    $route: {
      handler: function (route) {
        this.redirect = route.query && route.query.redirect;
      },
      immediate: true
    }
  },
  created() {
    this.getCode();
    this.getCookie();
  },
  methods: {
    getCode() {
      getCodeImg().then(res => {
        this.captchaEnabled = res.captchaEnabled === undefined ? true : res.captchaEnabled;
        if (this.captchaEnabled) {
          this.codeUrl = "data:image/gif;base64," + res.img;
          this.loginForm.uuid = res.uuid;
        }
      });
    },
    getCookie() {
      const username = Cookies.get("username");
      const password = Cookies.get("password");
      const rememberMe = Cookies.get('rememberMe');
      const userType = Cookies.get('userType')
      const nickName = Cookies.get('nickName')
      this.loginForm = {
        type: "2",
        userType: userType === undefined ? this.loginForm.userType : userType,
        username: username === undefined ? this.loginForm.username : username,
        nickName: nickName === undefined ? this.loginForm.nickName : nickName,
        password: password === undefined ? this.loginForm.password : decrypt(password),
        rememberMe: rememberMe === undefined ? false : Boolean(rememberMe)
      };
    },
    handleLogin() {
      this.$refs.loginForm.validate(valid => {
        if (valid) {
          this.loading = true;
          if (this.loginForm.rememberMe) {
            Cookies.set("username", this.loginForm.username, { expires: 30 });
            Cookies.set("password", encrypt(this.loginForm.password), { expires: 30 });
            Cookies.set('rememberMe', this.loginForm.rememberMe, { expires: 30 });
            Cookies.set('userType', this.loginForm.userType, { expires: 30 });
            Cookies.set('nickName', this.loginForm.nickName, { expires: 30 });
          } else {
            Cookies.remove("username");
            Cookies.remove("password");
            Cookies.remove('rememberMe');
            Cookies.remove('userType');
            Cookies.remove('nickName');
          }
          console.log(this.loginForm);
          this.$store.dispatch("Login", this.loginForm).then(() => {
            this.$router.push({ path: this.redirect || "/" }).catch(() => { });
          }).catch(() => {
            this.loading = false;
            if (this.captchaEnabled) {
              this.getCode();
            }
          });
        }
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.login-container {
  height: 100vh;
  width: 100vw;
  display: flex;
  position: relative;
  overflow: hidden;

  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url('../assets/images/loginother.jpg');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    z-index: 0;
    opacity: 0.9;
  }

  .login-left {
    flex: 1;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 80px;
    position: relative;
    z-index: 1;

    .login-content {
      text-align: center;
      color: #515151;

      .title-container {
        margin-bottom: 30px;

        .title {
          font-size: 46px;
          margin-bottom: 15px;
          font-weight: bold;
          text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
          transform: translateY(-30px);
        }

        .subtitle {
          font-size: 24px;
          text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
          transform: translateY(-10px);
        }
      }

      .login-banner {
        margin-top: 60px;

        .banner-text {
          font-size: 20px;
          text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
        }
      }
    }
  }

  .login-right {
    width: 680px;
    background: rgba(255, 255, 255, 0.95);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 1;
    box-shadow: -4px 0 15px rgba(0, 0, 0, 0.1);

    .login-box {
      width: 350px;

      .switch-account {
        text-align: right;
        margin-bottom: 20px;

        span {
          color: #666;
          cursor: pointer;
          font-size: 14px;
        }
      }

      .title-container {
        text-align: center;
        margin-bottom: 40px;

        .logo {
          height: 40px;
        }
      }

      .login-button {
        width: 100%;
        height: 44px;
        border-radius: 22px;
      }

      .login-options {
        margin: 20px 0;

        .agreement-links {
          color: #5e72e4;
          margin-left: 5px;
        }
      }

      .third-party-login {
        text-align: center;
        margin-top: 30px;

        p {
          color: #999;
          margin-bottom: 15px;
        }

        .login-icons {
          display: flex;
          justify-content: center;
          gap: 20px;

          img {
            width: 32px;
            height: 32px;
            cursor: pointer;
          }
        }
      }

      .el-form-item {
        position: relative;
        margin-bottom: 25px;

        .el-input {
          &.is-validate-code {
            width: 63%;
            margin-right: 37%;
          }
        }

        .login-code {
          position: absolute;
          right: 0;
          top: 0;
          height: 44px;
          width: 130px;

          .login-code-img {
            height: 44px;
            width: 100%;
            cursor: pointer;
            border-radius: 22px;
            border: 1px solid #dcdfe6;
          }
        }
      }

      .account-type {
        display: flex;
        justify-content: center;
        margin-bottom: 20px;

        .el-radio {
          margin-right: 20px;

          &:last-child {
            margin-right: 0;
          }
        }
      }
    }
  }
}

// ElementUI样式覆盖
::v-deep .el-input {
  .el-input__inner {
    height: 44px;
    border-radius: 22px;
    padding-left: 45px;
  }

  .el-input__prefix {
    left: 15px;
    font-size: 18px;
    color: #909399;
  }

  &.validate-code-input {
    .el-input__inner {
      padding-right: 15px;
    }
  }
}
</style>
